<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<title></title>
</head>
<style type="text/css">
	*{margin: 0;padding: 0;}
	.swiper-slide{width: 100vw;height: 100vh;overflow: hidden;}
	#bg{
		height:100vh;
		position: absolute;
		left:-34vw;
	}
	#content{width:100vw;height:100vh;position:absolute;z-index:10;}
	#content h1{
		width:100%;color: white;text-align: center;background:#000;padding:2vw 0;position:relative;z-index:10;
	}
	/*第一屏*/
	.bg{width:40vw;height:50vh;background:rgb(8, 161, 239);margin:0 auto;}
	.t1{width: 46vw;position: relative;left:-3vw;}
	.bg span{color:white;display:block;width:9vw;font-size:9vw;float: left;margin-left:7.5vw;}
	.sp1{width:40vw;height:1.2vh;background:rgb(8, 161, 239);margin:1vh auto;}
	/*第二屏*/
	.lt{width:60vw;height:60vw;position: absolute;}
	.lt1{background:rgb(197, 151, 2);left:4vw;top:16vw;}
	.lt2{background:rgb(255, 194, 0);left:8vw;top:20vw;}
	.lt3{background:white;left:12vw;top:24vw;padding:5vw 7vw;box-sizing: border-box;color:rgb(255, 194, 0);line-height:7vw;}
	.pic2{width:100vw;margin-top:72vh;position: relative;}
	.pic3{position: absolute;top:68vh;right:5vw;}
	/*第三屛*/
	.title{width:100vw;padding: 8vw 13vw; line-height:8vw;box-sizing: border-box;overflow: hidden;color: rgb(33, 150, 237);}
	.jiao{border-right:5vw solid rgb(27, 115, 181);border-bottom:5vw solid rgb(27, 115, 181);border-left:5vw solid white;border-top:5vw solid white;margin-left:5vw;float: left;position:relative;z-index:10;}
	.pic4{width:82vw;height:76vw;float: left;position:relative;z-index:10;}
	.pic4 img{width:100%;height:100%;}
	.content4{width:82vw;height:66vh;background: rgb(8, 161, 239);margin-left: 5vw;position:relative;z-index:1;}
	.content4 span{display: block;padding:3vw 10vw;box-sizing:border-box;position: relative;top:10vw;color:white;line-height:6vw;}
	/*第四屏*/
	.bg2{width:92vw;height:90vw;background: rgb(238, 205, 121);margin-left:4vw;margin-top:10vw;}
	.jiao2{border-right:5vw solid white;border-bottom:5vw solid white;border-left:5vw solid rgb(238, 205, 121);border-top:5vw solid rgb(238, 205, 121);margin-left: 3vw;margin-top: 3vw;float: left;}
	.pic5{width:72vw;height:70vw;float: left;position: relative;top:13vw;z-index:10;}
	.pic5 img{width: 100%;height:100%;}
	.jiao3{border-right:14vw solid rgb(238, 205, 121);border-bottom:14vw solid rgb(238, 205, 121);border-left:14vw solid rgba(238, 205, 121,0);border-top:14vw solid rgba(238, 205, 121,0);position:relative;z-index:20;top:-8vw;float:right;}
	.content5{width: 92vw;height:50vw;background:#E5E7EC;margin-left: 4vw;}
	.content5 p{text-align: center;line-height:9vw;color: rgb(170, 131, 31);}
	.content5 p:nth-child(1){padding-top: 10vw;}
	/*第五屏*/
	.pic6{width:64vw;height:50vw;background: url(images/pic6.png) no-repeat;background-size: 100% 100%;margin-left:4vw;margin-top: 8vw;position: relative;z-index:2;padding:10vw 6vw;box-sizing: border-box;line-height:8vw;color: #51AC7F;}
	.pic8{display: block;width:84vw;height:76vw;margin: 0 auto;position: relative;top:-12vh;z-index: 10;}
	.pic7{display: block;width:36vw;height:30vw;margin-left:60vw;top:-26vh;position:relative;z-index: 2;}
	.conten6{width:88vw;position:absolute;top:80vh;color:#189254;margin-left:6vw;}
	/*第六屏*/
	.title1{width: 84vw;height:80vw;background:url(images/pic11.png) no-repeat;background-size: 100% 100%;position:relative;top:-10vw;z-index:0;color: white;padding:16vw 14vw;box-sizing: border-box;line-height:8vw;}
	/*第七屏*/
	.pic13{display:block;width:110vw;height:60vh;position:relative;left:-10vw;background: url(images/pic13.png) no-repeat;background-size:100% 100%;}
	.pic14{width:74vw;height:70vw;position: relative;left:28vw;top:16vw;}
	.content7{padding:10vw 14vw;box-sizing: border-box;color: rgb(122, 144, 178);line-height: 6vw;}
	#img{width:14vw;height:14vw;background:url(images/music.png) no-repeat;transform:rotate(0deg);position:absolute;z-index:100;background-size:100%;top:18vw;left:80vw;}
</style>
<script type="text/javascript">
	window.onload=function(){
		var img=document.getElementById('img');
		var audio=document.getElementById('audio');
		var i=0;
		img.onclick=function(){
			if(i==0){
				audio.pause();
				img.style.background="url(images/music_stop.png) no-repeat";
				img.style.backgroundSize="100%";
				clearInterval(timer);
				i=1;
			}else{
				audio.play();
				timer=setInterval(run,10);
				img.style.background="url(images/music.png) no-repeat";
				img.style.backgroundSize="100%";
				i=0;
			}
		}
		var a=0;
		function run(){
			a++;
			img.style.transform="rotate("+a+"deg)";
		}
		timer=setInterval(run,10);
	}
</script>
<body>
	<div class="swiper-container">
		<div id="img"></div>
		<audio id="audio" src="music.mp3" loop autoplay></audio>
	    <div class="swiper-wrapper">
	        <div class="swiper-slide">
	        	<img id="bg" src="images/bg1.png" alt="" />
	        	<div id="content">
	        		<h1>关于旅行的那些事</h1>
	        		<div class="ani bg" swiper-animate-effect="slideInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s">
	        			<img class="ani t1" swiper-animate-effect="bounceIn" swiper-animate-duration="0.7s" swiper-animate-delay="1.2s" src="images/pic1.png"/>
	        			<span class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.3s">关于旅行</span>
	        			<span class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.3s">的那些事</span>
	        		</div>
	        		<div class="sp1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.3s"></div>
	        		<div class="sp1 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.3s"></div>
	        	</div>
	        </div>
	        <div class="swiper-slide">
	        	<img id="bg" style="left: 0;" src="images/bg2.png"/>
	        	<div id="content">
	        		<h1>关于旅行的那些事</h1>
	        		<div class="lt lt1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></div>
	        		<div class="lt lt2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s"></div>
	        		<div class="lt lt3 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
	        			<span class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="1.4s" >
		        			1.身份证、机票、护照 、一定要检查好 <br />
		        			2.防晒霜、防晒伞，太阳镜，大家不会以为你去的是“非洲”<br />
		        			3.尽量少带行李，可以尝试当地风格的美衣
	        			</span>
	        		</div>
	        		<img class="pic2 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.4s" src="images/pic2.png" alt="" />
	        		<img class="pic3 ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="1.4s" src="images/pic3.png"/>
	        	</div>
	        </div>
	        <div class="swiper-slide">
	        	<div id="content">
	        		<h1>关于旅行的那些事</h1>
	        		<div class="title ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
	        			第一站：<br />
	        			意大利古罗马斗兽场
	        		</div>
	        		<div class="content3">
	        			<div class="jiao ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.9s"></div>
	        			<div class="pic4 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"><img src="images/pic4.jpg"/></div>
	        			<div class="content4 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        				<span class="ani" swiper-animate-effect="flipInX" swiper-animate-duration="1.5s" swiper-animate-delay="1s">心情笔记：记住旅行前，做点功课是必要的，古罗马斗兽场是意大利的，不是希腊的</span>
	        			</div>
	        		</div>
	        	</div>
	        </div>
	        <div class="swiper-slide">
	        	<div id="content" style="background: #ccc;">
	        		<h1>关于旅行的那些事</h1>
	        		<div class="bg2">
	        			<div class="jiao2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.3s"></div>
	        			<div class="pic5 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s">
	        				<img src="images/pic5.jpg"/>
	        			</div>
	        			<div class="jiao3 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"></div>
	        		</div>
	        		<div class="content5 ani" swiper-animate-effect="rollIn" swiper-animate-duration="1.2s" swiper-animate-delay="1s">
	        			<p class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.2s" swiper-animate-delay="2.2s">第二站</p>
	        			<p class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.2s" swiper-animate-delay="2.2s">希腊   神庙</p>
	        			<p class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1.2s" swiper-animate-delay="2.2s">“传说中的雅典娜”</p>
	        		</div>
	        	</div>
	        </div>
	        <div class="swiper-slide" style="background: #F6F7FB;">
	        	<div id="content">
	        		<h1>关于旅行的那些事</h1>
	        		<div class="pic6 ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        			第三站<br />
	        			法国酒馆
	        		</div>
	        		<img class="pic8 ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="images/pic8.png" alt="" />
	        		<img class="pic7  ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="images/pic7.png"/>
	        		<div class="conten6 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s">"世界上有这么多酒馆，为什么偏偏走进这一家”<br />
	        		心情笔记：一间小巧的酒馆，迎接各样的客人，人们在这里放松自己，试着寻找自己的声音</div>
	        	</div>
	        </div>
	        <div class="swiper-slide">
	        	<img id="bg" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="images/pic12.jpg" alt="" />
	        	<img id="bg" src="images/pic10.png" style="left:0;height:100vh;"/>
	        	<div id="content">
	        		<h1>关于旅行的那些事</h1>
	        		<div class="title1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
	        			当地的阿姨很热<br />
	        			当地的美食很热辣<br />
	        			心情笔记：<br />
	        			老板，再来一份鹅肝酱
	        		</div>
	        	</div>
	        </div>
	         <div class="swiper-slide" style="background: #F6F7FB;">
	        	<div id="content">
	        		<h1>关于旅行的那些事</h1>
	        		<div class="pic13 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s">
	        			<img class="pic14 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s" src="images/pic14.jpg" alt="" />
	        		</div>
	        		<div class="content7 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
	        			去一个新的地方<br />
	        			假装自己是当地人<br />
	        			“哎呀，这个水果真是新鲜呢”<br />
	        			<br />
	        			努力工作，期待我们下次旅行再见。
	        		</div>
	        	</div>
	        </div>
	    </div>
	</div>
</body>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay : 5000,
    autoplayDisableOnInteraction : false,

	 onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
	    swiperAnimateCache(swiper); //隐藏动画元素 
	    swiperAnimate(swiper); //初始化完成开始动画
	  }, 
	  onSlideChangeEnd: function(swiper){ 
	    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	  } 
  });
 </script>
</html>
